
import glUtils from "../utils/glUtils";
/**
 *  模板测试
 */

const vs = `#version 300 es

layout(location = 0) in vec4 vPosition;
layout(location = 1) in vec4 vColor;

// uniform mat4 model_matrix;
// uniform mat4 proj_matrix;

out vec4 oColor;

void main() {
    // vec4 pos = proj_matrix * model_matrix * vPosition;
    // gl_PointSize = 20.0;
    // gl_Position = pos;
    gl_Position = vPosition;
    oColor = vColor;
}
`;

const fs = `#version 300 es
precision mediump float;

in vec4 oColor;
out vec4 color;

void main() {
    color = oColor;
}`;

const tpVertices = [
    0,0.3,   1,0,0,1,
    -0.3,0,  0,1,0,1,
    0.3,0,   0,0,1,1,
];

const vertices = [
    0,0.5,   1,0,0,1,
    -0.5,-0.5,  0,1,0,1,
    0.5,-0.5,   0,0,1,1,
];

const ItemSize = Float32Array.BYTES_PER_ELEMENT;

export default {
    gl:null,

    // handle
    vPosition:0,
    vColor:1,

    init(gl){
        this.gl = gl;

        this.program = glUtils.createProgram(gl,vs,fs);

        // 镂空的区域
        this.tpVao = gl.createVertexArray();
        gl.bindVertexArray(this.tpVao);

        this.tpVbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,this.tpVbo);
        gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(tpVertices),gl.STATIC_DRAW);

        gl.enableVertexAttribArray(this.vPosition);
        gl.vertexAttribPointer(this.vPosition,2,gl.FLOAT,false,ItemSize * 6,0);

        gl.enableVertexAttribArray(this.vColor);
        gl.vertexAttribPointer(this.vColor,4,gl.FLOAT,false,ItemSize * 6,ItemSize * 2);

        // 需要绘制的
        this.vao = gl.createVertexArray();
        gl.bindVertexArray(this.vao);

        this.vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,this.vbo);
        gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW);

        gl.enableVertexAttribArray(this.vPosition);
        gl.vertexAttribPointer(this.vPosition,2,gl.FLOAT,false,ItemSize * 6,0);

        gl.enableVertexAttribArray(this.vColor);
        gl.vertexAttribPointer(this.vColor,4,gl.FLOAT,false,ItemSize * 6,ItemSize * 2);

        gl.bindVertexArray(null);

        // 设置清除模板值
        gl.clearStencil(0x0);
    },

    render(){
        let gl = this.gl;

        gl.enable(gl.STENCIL_TEST);
        gl.clear(gl.STENCIL_BUFFER_BIT);

        gl.useProgram(this.program);

        // 先绘制镂空区域
        gl.bindVertexArray(this.tpVao);

        // 设置模板总是通过
        gl.stencilFunc(gl.ALWAYS,0x1,0x1);

        // 设置模板总是替换为  0x1
        gl.stencilOp(gl.REPLACE,gl.REPLACE,gl.REPLACE);

        // 禁止绘制颜色,从而不会绘制出图形,只会更新模板值
        gl.colorMask(false,false,false,false);
        gl.drawArrays(gl.TRIANGLES,0,3);

        //===================
        // 让颜色缓存可写,然后绘制大的三角形
        gl.colorMask(true,true,true,true);
        gl.bindVertexArray(this.vao);

        // 设置模板值 不等于 0x1 才通过模板测试
        gl.stencilFunc(gl.NOTEQUAL,0x1,0x1);

        // 设置模板值不更新
        gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
        gl.drawArrays(gl.TRIANGLES,0,3);
        gl.bindVertexArray(null);

        gl.disable(gl.STENCIL_TEST);
    }
};